@{
    ViewBag.Title = "二维码制作";
    ViewBag.keywords = "二维码,二维码制作,二维码生成,二维码图片";
    ViewBag.description = "在线二维码制作工具,二维码制作,二维码生成,二维码图片";
var host = Appsettings.app("BaseFile:HostUrl");}
<div class="layui-row layui-form layui-form-pane">
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">内容：</label>
        <div class="layui-input-block">
            <span class="file">
                <textarea id="content" name="content"  onfocusin="onInputText(this)" onpaste="setTimeout(generate,1)" lay-verify="required" autocomplete="off" class="layui-textarea"></textarea>
                <p id="text_help" class="layui-text">字数越多，越不易扫描
            </span>
            <span>
                <label id="file_name"></label>
            </span>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
            <label class="layui-form-label">尺寸(px)</label>
            <div class="layui-input-block">
                <input id="input_size" class="layui-input" type="number" value=270 oninput="if(value>1000)value=1000">
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
            <label class="layui-form-label">纠错等级</label>
            <div class="layui-input-block">
                <select id="select_level" class="layui-select" style="min-width:100px;">
                    <option value="2">H : 高</option>
                    <option value="3" selected>Q : 中等</option>
                    <option value="0">M : 低</option>
                    <option value="1">L : 最低</option>
                </select>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
            <label class="layui-form-label">背景颜色</label>
            <div class="layui-input-block">
                <input id="input_bg" class="layui-input" type="color" value="#ffffff" style="min-width:100px;">
            </div>
        </div>

        <div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
            <label class="layui-form-label">前景颜色</label>
            <div class="layui-input-block">
                <input id="input_fg" class="layui-input" type="color" value="#000000" style="min-width:100px;">
            </div>
        </div>
    </div>
    <div class="layui-row" style="margin:5px 0;text-align:center;">
        <a class="layui-btn layui-btn-fluid layui-btn-normal" onclick="generate();" style="max-width:100px;">生成二维码</a>
    </div>

    <div class="layui-row" style="margin:5px 0;">
        <figure id="img_qrcode" style="width:270px; height: 270px; background-color: #f3f3f3; clear: both; display: block; margin: auto;"></figure>
    </div>
    <div class="layui-row" style="margin:5px 0;text-align:center;"> <a class="layui-btn layui-btn-fluid" onclick="save();" style="max-width:100px;">保存图片</a></div>


    <div class="layui-row" style="padding-top:15px;">
        <h2 style="padding:15px;">二维码原理</h2>
        <blockquote class="layui-elem-quote">
            <p class="layui-text">
                二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码。
                堆叠式/行排式二维条码形态上是由多行短截的一维5条码堆叠而成；
                矩阵式二维条码以矩阵的形式组成，在矩阵相应元素位置上用“点”表示二进制“1”，
                用“空”表示二进制“0”，“点”和“空”的排列组成代码。
            </p>
        </blockquote>
        <h2 style="padding:15px;">数据表示方法</h2>
        <blockquote class="layui-elem-quote">
            <p class="layui-text">深色模块表示二进制“1”，浅色模块表示二进制“0”。 </p>
        </blockquote>
        <h2 style="padding:15px;">纠错能力</h2>
        <blockquote class="layui-elem-quote">
            <ul class="layui-text">
                <li>level L : 约可纠错7%的数据码字</li>
                <li>level M : 约可纠错15%的数据码字</li>
                <li>level Q : 约可纠错25%的数据码字</li>
                <li>level H : 约可纠错30%的数据码字</li>
            </ul>
        </blockquote>
    </div>
</div>

@section Scripts{
<script src="@host/lib/qrcode.min.js"></script>
<script>
    let img_qrcode = document.getElementById('img_qrcode');
    function generate() {
        let area_text = document.getElementById('content');
        var inptxt = area_text.value;
        if (inptxt === null || inptxt === undefined || inptxt === '') {
            layer.msg("请输入二维码内容.", { icon: 2 });
            return;
        }
        img_qrcode.innerHTML = '';
        img_qrcode.style.visibility = 'hidden';
        let size = parseInt(document.getElementById('input_size').value);
        if (size <= 0 || size > 1000) { return; }
        try {
            new QRCode(img_qrcode, {
                text: area_text.value,
                width: size,
                height: size,
                colorDark: document.getElementById('input_fg').value,
                colorLight: document.getElementById('input_bg').value,
                correctLevel: parseInt(document.getElementById('select_level').value)
            });
            setTimeout(() => img_qrcode.style.visibility = 'visible');
        }
        catch (e) {
            document.getElementById('area_text').classList.add('error');
            let text_help = document.getElementById('text_help');
            text_help.classList.add('text-error');
            text_help.innerText = '内容过多'
        }
    }
    function onInputText(e) {
        e.classList.remove('error');
        let text_help = document.getElementById('text_help');
        text_help.classList.remove('text-error');
        text_help.innerText = '字数越多，越不易扫描';
    }
    function save() {
        let img = img_qrcode.getElementsByTagName('img')[0];
        let url = img.src; let a = document.createElement('a');
        let event = new MouseEvent('click');
        a.download = 'qrcode_' + Math.round(new Date() / 1000);
        a.href = url; a.dispatchEvent(event)
    }
</script>
}
